<template>
  <div class="login-container">
    <div class="slider">
      <!-- 登录表单 -->
      <div :class="active === 1 ? 'form' : 'form hidden'">
        <div class="title">欢迎<b>回来</b></div>
        <div class="subtitle">登录你的账户</div>
        <el-form @submit.prevent="handleLogin" label-position="left">
          <el-form-item label="角色">
            <el-select v-model="loginData.role" placeholder="请选择角色">
              <el-option label="学生" value="student" />
              <el-option label="管理员" value="admin" />
              <el-option label="高校" value="school" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="loginData.username" placeholder="请输入账号" class="custom-input" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input 
              v-model="loginData.password" 
              placeholder="请输入密码" 
              type="password" 
            />
          </el-form-item>
          <el-button 
            type="primary" 
            native-type="submit" 
            class="submit-btn"
          >
            登录
          </el-button>
        </el-form>
      </div>

      <!-- 注册表单 -->
      <div :class="active === 2 ? 'form' : 'form hidden'">
        <div class="title">开始</div>
        <div class="subtitle">注册你的账户</div>
        <el-form @submit.prevent="handleRegister" label-position="left">
          <el-form-item label="角色">
            <el-select v-model="registerData.role" placeholder="请选择角色">
              <el-option label="学生" value="student" />
              <el-option label="高校" value="school" />
            </el-select>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="registerData.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input 
              v-model="registerData.password" 
              placeholder="请输入密码" 
              type="password" 
            />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input 
              v-model="registerData.confirmPassword" 
              placeholder="请再次输入密码" 
              type="password" 
            />
          </el-form-item>
          <el-button 
            type="primary" 
            native-type="submit" 
            class="submit-btn"
          >
            注册
          </el-button>
        </el-form>
      </div>

      <!-- 右侧卡片 -->
      <div :class="active === 1 ? 'card' : 'card active'">
        <div class="head">
          <div class="name"><span>面试模拟</span>系统</div>
        </div>
        <div class="desc">专业的面试模拟平台，提供真实面试体验</div>
        <div class="btn">
          {{ active === 1 ? '新用户？' : '已有账户？' }}
          <button @click="active = (active === 1 ? 2 : 1)" class="switch-btn">
            {{ active === 1 ? '去注册' : '去登录' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserInformationStore } from '@/stores/canUserInformation'
import { service as request } from '@/utils/request'
import { setToken, parseJwt } from '@/utils/auth'
import axios from 'axios'

const router = useRouter()
const canUserInformation = useUserInformationStore()

// 控制登录/注册切换
const active = ref(1)

// 登录表单数据
const loginData = reactive({
  role: 'student',
  username: '',
  password: ''
})

// 注册表单数据
const registerData = reactive({
  role: 'student',
  username: '',
  password: '',
  confirmPassword: ''
})

// 数字人启动与关闭
const startAvatarOnLoginPage = async () => {
  try {
    const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8080'
    await axios.post(`${API_BASE}/api/avatar/start?round=4`)
    console.log('数字人已在登录页启动')
  } catch (error) {
    console.error('登录页启动数字人失败:', error)
  }
}

const stopAvatarOnLoginPage = async () => {
  try {
    const API_BASE = import.meta.env.VITE_API_BASE || 'http://localhost:8080'
    await axios.post(`${API_BASE}/api/avatar/stop`)
    console.log('数字人已在登录页关闭')
  } catch (error) {
    console.error('登录页关闭数字人失败:', error)
  }
}

onMounted(() => {
  startAvatarOnLoginPage()
})

onUnmounted(() => {
  stopAvatarOnLoginPage()
})

// 登录方法
const handleLogin = () => {
  request.post('/api/login', loginData)
    .then(res => {
      if (res.code === 200) {
        const token = res.token || null
        if (token) setToken(token)

        const userInfo = parseJwt()
        if (userInfo && userInfo.role) {
          localStorage.setItem('userInfo', JSON.stringify(userInfo))
          canUserInformation.setUserInfo(userInfo)
        }

        if (res.businessStatus === 0) {
          ElMessage.success('登录成功')
          router.push(`/${userInfo.role}/Home?status=0`)
        } else if (res.businessStatus === 1) {
          ElMessage.warning('您的信息未完善，请补全资料')
          router.push(`/${userInfo.role}/Home?status=1`)
        }

      } else {
        ElMessage.error(res.msg || '登录失败')
      }
    })
    .catch(error => {
      ElMessage.error('登录失败，请检查网络或账号密码')
      console.error(error)
    })
}

// 注册方法
const handleRegister = () => {
  if (registerData.password !== registerData.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  request.post('/api/register', registerData)
    .then(res => {
      if (res.code === 200) {
        ElMessage.success('注册成功')
        active.value = 1
      } else {
        ElMessage.error(res.msg || '注册失败')
      }
    })
    .catch(error => {
      ElMessage.error('注册失败，请检查网络')
      console.error(error)
    })
}
</script>


<style lang="scss" scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
background: url("../assets/back2.jpg")no-repeat center center fixed;//替换
  background-size: cover;
    background-attachment: fixed;
    padding: 20px;
    position: relative;
    overflow: hidden;
  
    .slider {
      .form {
        .el-form {
          :deep(.el-form-item) {
            width: 100%;
            margin-bottom: 25px;
  
            // 修正1：直接写子选择器，不使用 &__label
            .el-form-item__label {
              display: block;
              margin-bottom: 8px;
              font-weight: 500;
              color: #555;
              width: 80px; // 固定标签宽度
            }
  
            // 修正2：使用 :deep 穿透作用域
            :deep(.el-form-item__content) {
              flex: 1;
  
              .el-input {
                width: 100%;
              }
            }
          }
        }
      }
    }
  
    /* 装饰元素 */
    &::before {
      content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    top: -250px;
    left: -150px;
    z-index: 1;
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    z-index: 1;
  }
  
  .slider {
    position: relative;
    display: flex;
    width: 900px;
    height: 500px;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    
    /* 表单通用样式 */
    .form {
      width: 450px;
      height: 100%;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      backdrop-filter: blur(16px) saturate(180%);
      border-radius: 10px;
      box-shadow: 
        rgba(50, 50, 93, 0.25) 50px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 30px 30px 60px -30px;
      z-index: 2;
      transition: all 0.5s ease;
      
      .title {
        font-size: 28px;
        color: #2c3e50;
        margin-bottom: 10px;
        letter-spacing: 1px;
        font-weight: 600;
        
        b {
          color: #008997;
        }
      }
      
      .subtitle {
        font-size: 16px;
        color: #7f8c8d;
        margin-bottom: 35px;
        letter-spacing: 1px;
      }
      
      .el-form {
        width: 100%;
        position: relative;
        margin-bottom: 35px;
        
        .el-form-item {
          margin-bottom: 25px;
          position: relative;
          
          :deep(.el-form-item__label) {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
          }
          
          :deep(.el-input__inner) {
            height: 46px;
            padding: 0 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            
            &:focus {
              border-color: #008997;
              // box-shadow: 0 0 0 2px rgba(0, 137, 151, 0.2);
            }
          }
          
          :deep(.el-select) {
            width: 100%;
          }
        }
      }
      
      /* 解决重叠问题 - 隐藏非活动表单 */
      &.hidden {
        opacity: 0;
        transform: translateX(-100%);
        pointer-events: none;
      }
    }
    
    /* 右侧卡片 */
    .card {
      position: absolute;
      top: 0;
      right: 0;
      width: 450px;
      height: 100%;
      // padding: 50px 40px;
      background: url("../assets/logo1.png") white;
         background-size: cover;
      background-image: linear-gradient(
        rgba(255, 255, 255, 0.5), 
        rgba(255, 255, 255, 0.6)
      ), url("../assets/logo1.png");
      color: #2c3e50;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      z-index: 3;
      
      .head {
        .name {
          font-size: 36px;
          font-weight: 90%;
          margin-bottom: 0px;
          
          span {
            color: #008997;
            margin-bottom: 50px;
          }
        }
      }
      
      .desc {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 35px;
        opacity: 0.9;
      }
      
      .btn {
        font-size: 16px;
        // display: flex;
        // align-items: center;
        
        .switch-btn {
          background: #008997;
          color: white;
          font-weight: 600;
          border: none;
          padding: 10px 25px;
          border-radius: 25px;
          margin-left: 15px;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          
          &:hover {
            background: #007a85;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
          }
        }
      }
      
      /* 解决重叠问题 - 卡片切换位置 */
      &.active {
        right: 450px;
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    height: 46px;
    font-size: 16px;
    background: #008997;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    margin-top: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    
    &:hover {
      background: #007a85;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 137, 151, 0.3);
    }
  }
}

/* 响应式设计 */
@media (max-width: 950px) {
  .login-container .slider {
    width: 700px;
    height: 400px;
    
    .form, .card {
      width: 350px;
      padding: 30px;
    }
    
    .card.active {
      right: 350px;
    }
  }
}

@media (max-width: 750px) {
  .login-container .slider {
    width: 100%;
    height: auto;
    flex-direction: column;
    
    .form, .card {
      width: 100%;
      position: relative;
    }
    
    .form {
      height: auto;
      padding: 30px 20px;
      
      /* 移动端隐藏处理 */
      &.hidden {
        display: none;
      }
    }
    
    .card {
      position: relative;
      height: auto;
      padding: 30px 20px;
      
      /* 移动端卡片位置重置 */
      &.active {
        right: 0;
      }
    }
  }
}

/* 动画效果增强 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.title, .subtitle, .el-form-item, .submit-btn {
  animation: fadeIn 0.6s ease-out forwards;
}

.el-form-item:nth-child(1) { animation-delay: 0.1s; }
.el-form-item:nth-child(2) { animation-delay: 0.2s; }
.el-form-item:nth-child(3) { animation-delay: 0.3s; }
.submit-btn { animation-delay: 0.4s; }

</style>